<template>
  <div class="container">
    <div class="content-aside">
      <el-menu
        :default-active="activeMenu"
        :default-openeds="openedKeys"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        @select="handleSelect"
      >
        <el-submenu v-for="item in directoryList" :key="item.id" :index="'submenu-' + item.id">
          <template slot="title">
            <span>{{ item.name }}</span>
          </template>
          <el-menu-item-group>
            <el-menu-item
              v-for="chartitem in item.chapters"
              :key="chartitem.id"
              :index="'item-' + chartitem.id"
              @click="changeMain(chartitem.id)"
            >
              {{ chartitem.title }}
            </el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </div>
  </div>
</template>

<script>
import {getChapter, getDirectoryList} from "@/api/helpDocument";

export default {
  name: 'Aside',
  props: {
    defaultActiveId: { // 确保接收的 ID 是字符串类型
      type: String,
      default: ''
    }
  },
  data() {
    return {
      directoryList: [],
      openedKeys: [], // 控制哪些子菜单展开
      activeMenu: '', // 当前激活的菜单项，初始化时设置为默认选中 ID
    };
  },
  async mounted() {
    try {
      await this.init();
      // 根据 defaultActiveId 设置 activeMenu
      if (this.defaultActiveId) {
        this.activeMenu = 'item-' + this.defaultActiveId;
        this.$nextTick(() => {
          this.setOpenedKeys(this.defaultActiveId);
        });
      }
    } catch (error) {
      console.error('初始化过程中发生错误:', error);
    }
  },
  watch:{
    defaultActiveId(newval,oldval){
      this.activeMenu ='item-'+newval;
      this.$nextTick(() => {
        this.setOpenedKeys(newval);
      });
    }
  },
  methods: {
    handleSelect(index,indexpath){
      console.log('Menu opened:', index, indexpath);
    },
    handleOpen(key, keyPath) {
      this.openedKeys = [...this.openedKeys, key];
    },
    handleClose(key, keyPath) {
      this.openedKeys = this.openedKeys.filter(openedKey => openedKey !== key);
    },
    async init() {
      try {
        const directoryRes = await getDirectoryList({ type: 2,system_type:0 });
        this.directoryList = directoryRes.data;
        // this.openedKeys = this.directoryList.map(item => 'submenu-' + item.id);

        const chapterRes = await getChapter({ id: 0, type: 2, isInit: true,system_type:0 });
        this.activeMenu = 'item-' + chapterRes.data.id;
      } catch (error) {
        console.error('获取数据时发生错误:', error);
      }
    },
    setOpenedKeys(activeId) {
      // 通过 activeId 查找并展开相关的菜单项
      this.directoryList.forEach(item => {
        const isActive = item.chapters.some(chartitem => chartitem.id === parseInt(activeId, 10));
        if (isActive) {
          this.openedKeys = ['submenu-' + item.id];
        }
      });
    },
    changeMain(id) {
      this.$emit('menu-clicked', id); // 触发自定义事件
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  display: flex;
  height: 100vh; /* 确保容器高度为视口高度 */
}

.content-aside {
  border-right: 1px solid #ccc;
  height: calc(100vh - 110px); /* 视口高度减去 header 高度 */
  flex: 0 0 250px; /* 固定宽度或按需调整 */
  overflow-y: auto; /* 允许垂直滚动 */
  overflow-x: hidden; /* 防止水平滚动条 */
}

/* Webkit 浏览器滚动条样式 */
::-webkit-scrollbar {
  width: 2px; /* 滚动条宽度 */
}

::-webkit-scrollbar-thumb {
  background: #888; /* 滚动条颜色 */
  border-radius: 10px; /* 圆角 */
}

::-webkit-scrollbar-thumb:hover {
  background: #555; /* 鼠标悬停时滚动条颜色 */
}
.el-submenu .el-menu-item {
  height: 35px;
  line-height: 35px;
  padding: 0 20px;
  min-width: 200px;
}
::v-deep .el-submenu__title {
  height: 45px;
  line-height: 45px;
}
::v-deep .el-menu-item-group__title {
  padding: 0px 0 0px 20px;
  line-height: normal;
  font-size: 12px;
  color: #909399;
}

</style>



